<template>
  <view style="width: 100%;">
    <view class="empty-text" v-if="data_loading">数据加载中</view>
    <view
      class="empty-text"
      style="text-decoration: underline;color:#039bfe;"
      v-else-if="hasMore"
      @click="loadMore"
    >加载更多数据</view>
    <view class="empty-text" v-else-if="noMore">暂无更多数据啦！</view>
    <view class="empty-text mt-45" v-else>
      <view style="width: 150rpx;height:150rpx;margin:0 auto;">
        <image src="../../static/empy-data.png" mode="aspectFill" />
      </view>暂无数据
    </view>
  </view>
</template>

<script>
export default {
  name: 'LoadMore',
  props: {
    data_loading: {
      type: Boolean,
      default: true
    },
    hasMore: {
      type: Boolean,
      default: false
    },
    noMore: {
      type: Boolean,
      default: false
    },
  },
  methods: {
    loadMore () {
      this.$emit('load')
    }
  }
}
</script>

<style lang="scss" scoped>
.empty-text {
  width: 100%;
  padding: 20upx 10upx;
  text-align: center;
      line-height: 52rpx;
      font-size: 26rpx;
  color: #909399;
}
</style>